﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>文件上传 - 指定上传类型</title>
    <link href="demo.css" rel="stylesheet" type="text/css" />
    <link href="../css/uploader.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #upload-view { margin-top: 10px; }
    </style>
</head>

<body>
    <div id="header" class="header">Header</div>
    <div class="main">
        <div class="content">
            <div class="contentin">
                <div>
                    <a id="upload-image" class="x-button" x="image">选择图片</a>
                    <a id="upload-video" class="x-button" x="video">选择视频</a>
                    <a id="upload-audio" class="x-button" x="audio">选择音乐</a>
                </div>
                <div id="upload-view"></div>
            </div>
        </div>
        <div id="sidebar" class="sidebar"></div>
    </div>

    <script type="text/javascript" src="demo.js"></script>

    <script type="text/javascript" src="../js/Q.js"></script>
    <script type="text/javascript" src="../js/Q.Uploader.js"></script>
    <script type="text/javascript" src="../js/Q.Uploader.UI.File.js"></script>

    <script type="text/javascript">
        var map_settings = {
            image: {
                allows: ".jpg,.png,.gif,.bmp",
                accept: "image/*"
            },
            video: {
                allows: ".mp4,.mkv,.avi,.rmvb,.rm,.ts",
                accept: "video/*"
            },
            audio: {
                allows: ".mp3,.wma,.ape,.flac,.ogg",
                accept: "audio/*"
            }
        };

        var uploader = new Q.Uploader({
            url: UPLOAD_URL + "?type=image",
            target: [document.getElementById("upload-image"), document.getElementById("upload-video"), document.getElementById("upload-audio")],
            view: document.getElementById("upload-view"),

            //回调函数
            on: {
                select: function (e) {
                    var el = e.target || e.srcElement,
                        type = el.getAttribute("x"),
                        settings = map_settings[type];

                    this.set(settings);
                },
                add: function (task) {
                    if (task.disabled) return alert("允许上传的文件格式为：" + this.ops.allows);
                }
            }
        });
    </script>
</body>
</html>